<template>
	<!-- 场管预约管理新增 -->
	<div id="NewManagement">
		<div class="content" style="height: 800px">
			<el-form class="table" ref="form" :model="form" label-width="80px">
				<h2 style="margin: 0 0 20px 680px">学习场馆预约</h2>
				<el-form-item style="margin: 0 0 10px 560px" label="场馆名称:">
					{{ form.roomName }}
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 560px" label="开放时间:">
					{{ form.time }}
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 560px" label="预约时间:">
					<el-col>
						<el-time-select
							style="width: 150px"
							placeholder="起始时间"
							v-model="startTime"
							:picker-options="{
								start: '08:30',
								step: '00:15',
								end: '18:30'
							}"
						></el-time-select>
						至
						<el-time-select
							style="width: 150px; margin-left: 10px"
							placeholder="结束时间"
							v-model="endTime"
							:picker-options="{
								start: '08:30',
								step: '00:15',
								end: '18:30',
								minTime: startTime
							}"
						></el-time-select>
					</el-col>
          <p style="font-weight: bold;">(可预约时间：{{this.timeBtn.toString()}})</p>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 560px" label="预约人:">
					{{ form.appApprover }}
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 560px" label="审批人:">
					{{ form.appApprover }}
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 560px" label="选择设备:">
					<el-checkbox
						:indeterminate="isIndeterminate"
						v-model="checkAll"
						@change="handleCheckAllChange"
					>
						全选
					</el-checkbox>
					<div style="margin: 15px 0"></div>
					<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
						<el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 560px" label="备注:">
					<el-input type="textarea" v-model="form.desc" style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 660px">
					<el-button type="primary" @click="onSubmit">提交预约</el-button>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 570px" label="*注意：">
					<p style="color: red">确定预约并且审核通过之后，将不可取消</p>
				</el-form-item>
				<el-form-item style="margin: 0 0 10px 570px; height: 320px">
					<p style="color: red"></p>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import {
	appoinmentTasksAdd,
	appoinmentCustomerRoomsListCustomerRoomAppTimeScope
} from '@/APIs/index/index'
const cityOptions = ['摄影', '摄像', '用车']

export default {
	name: 'NewManagement',
	data() {
		return {
			form: {
				roomName: this.$route.query.customerRoomAppName,
				userName: this.$route.query.appApprover,
				appApprover: this.$route.query.appApprover,
				roomAppId: this.$route.query.roomAppId,
				roomAppTimeId: this.$route.query.roomAppId,
				date: this.$route.query.date,
				time: this.$route.query.roomAppTimeScope,
				type: this.$route.query.roomType,
				desc: '',
				userTime: ''
			},
			checkAll: false,
			checkedCities: [],
			cities: cityOptions,
			isIndeterminate: true,
			timeBtn: '',
			startTime: '',
			endTime: ''
		}
	},
	created() {
    this.NewManagement()
    this.btn()
		console.log(this.$route.query)
	},
	methods: {
		async NewManagement() {
			// 查询所属楼栋
			// const BuildingData = await appoinmentRoomsListBuilding({})
			// for (let i = 0; i < BuildingData.data.length; i++) {
			// 	this.buildingList.push({
			// 		label: BuildingData.data[i].building_name,
			// 		name: BuildingData.data[i].building_name,
			// 		value: BuildingData.data[i].building_id
			// 	})
			// }
			// console.log(this.buildingList)
			// // 查询房间分类
			// const dictType = this.typeList[0].value
			// const RoomTypeList = await getType({ dictType })
			// for (let i = 0; i < RoomTypeList.data.length; i++) {
			// 	this.roomTypeList.push({
			// 		label: RoomTypeList.data[i].dictLabel,
			// 		name: RoomTypeList.data[i].dictLabel,
			// 		value: RoomTypeList.data[i].dictValue
			// 	})
			// }
			// console.log(this.roomTypeList)
			// this.roomTypeList
		},
		// 点击所属楼栋下拉框
		buildingValue(v) {
			this.buildingId = v
			console.log(v)
			var buildingName = this.buildingList[v - 1].name
			console.log(buildingName)
			this.form.buildingName = buildingName
		},
		// 点击保存
		async onSubmit() {
			this.form.userTime = this.startTime + '-' + this.endTime
			console.log(
				'房间分类:',
				this.form.type,
				'房间名称:',
				this.form.roomName,
				'审批人:',
				this.form.appApprover,
				'用户名:',
				this.form.appApprover,
				'管理员规定时间:',
				this.form.time,
				'自选时间:',
				this.form.userTime,
				'预约日期:',
				this.form.date,
				'预约房间id:',
				this.form.roomAppId,
				'预约房间时间id:',
				this.form.roomAppTimeId,
				'选择的器材:',
				this.checkedCities.toString(),
				'备注:',
				this.form.desc
			)
			const customerRoomAppName = this.form.roomName
			const customerRoomAppTimeScope = this.form.userTime
			const customerRoomAppDate = this.form.date
			const customerRoomAppUsername = this.form.appApprover
			const customerRoomAppApprover = this.form.appApprover
			const customerRoomAppEquipment = this.checkedCities.toString()
			const customerRoomAppRemark = this.form.desc
			const roomAppTimeScope = this.form.time
			const roomAppId = this.form.roomAppId
			const roomAppTimeId = this.form.roomAppTimeId
			const customerRoomAppType = this.form.type
			const data = await appoinmentTasksAdd({
				customerRoomAppName,
				customerRoomAppTimeScope,
				customerRoomAppDate,
				customerRoomAppUsername,
				customerRoomAppApprover,
				customerRoomAppEquipment,
				customerRoomAppRemark,
				roomAppTimeScope,
				roomAppId,
				roomAppTimeId,
				customerRoomAppType
			})
			console.log(data)
		},
		// 点击提交按钮
		submitForm(formName) {
			console.log('formName', formName)
			this.$refs[formName].validate(valid => {
				if (valid) {
					alert('提交成功!')
				} else {
					console.log('提交失败!!')
					return false
				}
			})
		},
		async btn() {
      const roomAppId = this.form.roomAppId
      const roomAppTimeId = this.form.roomAppTimeId
			const data = await appoinmentCustomerRoomsListCustomerRoomAppTimeScope({
				roomAppId,
				roomAppTimeId
			})
      console.log(data.data)
      this.timeBtn = data.data
		},
		// 全选按钮
		handleCheckAllChange(val) {
			this.checkedCities = val ? cityOptions : []
			this.isIndeterminate = false
		},
		// 单选按钮
		handleCheckedCitiesChange(value) {
			let checkedCount = value.length
			this.checkAll = checkedCount === this.cities.length
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
		},

	}
}
</script>

<style lang="scss" scoped>
</style>